<template>
  <div>
    <el-container class="layout-container">
      <el-aside class="custom-info">
        <custom-info-item :customForm="customForm"/>
      </el-aside>
      <el-main>
        <el-row :gutter="10">
          <el-col :span="21" class="main-scroll">

            <el-scrollbar wrap-class=""
                          wrap-style=""
                          view-style="max-height:calc(100vh - 120px)"
                          view-class="view-box-design"
                          :native="false"
                          ref="myScrollbar">
              <el-card class="box-card" ref="fcxx">
                <div slot="header" class="clearfix">
                  <span>房产信息</span>
                </div>
                <room-info ref="roomRef" :customForm="customForm"/>
              </el-card>
              <el-card class="box-card" style="margin-top: 10px;" ref="qfjj">
                <div slot="header" class="clearfix">
                  <span>欠费记录</span>
                </div>
                <arrearage-record ref="arrearageRef" :customForm="customForm"/>
              </el-card>
              <el-card class="box-card" style="margin-top: 10px;" ref="jfjl">
                <div slot="header" class="clearfix">
                  <span>缴费记录</span>
                </div>
                <payment-record ref="paymentRef" :customForm="customForm"/>
              </el-card>
              <el-card class="box-card" style="margin-top: 10px;" ref="clxx">
                <div slot="header" class="clearfix">
                  <span>车辆信息</span>
                </div>
                <vehicle-info ref="vehicleRef" :customForm="customForm"/>
              </el-card>
            </el-scrollbar>
          </el-col>
          <el-col :span="3">
            <el-tabs tab-position="right" v-model="activeName" @tab-click="tabsClick">
              <el-tab-pane label="房产信息" name="fcxx"></el-tab-pane>
              <el-tab-pane label="欠费记录" name="qfjj"></el-tab-pane>
              <el-tab-pane label="缴费记录" name="jfjl"></el-tab-pane>
              <el-tab-pane label="车辆信息" name="clxx"></el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  import CustomInfoItem from "./customInfoItem"
  import RoomInfo from "./roomInfo"
  import ArrearageRecord from "./arrearageRecord"
  import PaymentRecord from "./paymentRecord"
  import VehicleInfo from "./vehicleInfo"
  import {listCustomInfo} from "@/api/waitress/customInfo";

  export default {
    components: {VehicleInfo, ArrearageRecord, CustomInfoItem, RoomInfo, PaymentRecord},
    data() {
      return {
        routeParam: {},
        customForm: {},
        activeName: 'fcxx',
        heightList:{
          fcxx: 0,
          qfjj: 0,
          jfjl: 0,
          clxx: 0
        }
      }
    },
    created() {
      this.routeParam = this.$route.query || {}
      this.initForm()
      this.$nextTick(()=>{
        this.$refs.myScrollbar.wrap.addEventListener("scroll", this.onScroll);
      })
    },
    methods: {
      initForm() {
        let params = {
          idCard: this.routeParam.idCard,
          communityId: this.routeParam.communityId,
          customId: this.routeParam.customId
        }
        listCustomInfo(params).then(res => {
          this.customForm = res.rows.length > 0 ? res.rows[0] : {}
        })
      },
      tabsClick(tab, event){
        this.$refs.myScrollbar.wrap.scrollTop = this.$refs[tab.name].$el.offsetTop
      },
      onScroll() {
        this.heightList.fcxx = this.$refs['fcxx'].$el.offsetTop
        this.heightList.qfjj = this.$refs['qfjj'].$el.offsetTop
        this.heightList.jfjl = this.$refs['jfjl'].$el.offsetTop
        this.heightList.clxx = this.$refs['clxx'].$el.offsetTop
        let scrolled = this.$refs.myScrollbar.wrap.scrollTop

        let offsetHeight = this.$refs.myScrollbar.wrap.offsetHeight //滚动可视区域的高度
        let scrollTop = this.$refs.myScrollbar.wrap.scrollTop //当前滚动的位置
        let scrollHeight = this.$refs.myScrollbar.wrap.scrollHeight //整个滚动的高度
        if((offsetHeight+scrollTop) > scrollHeight ){
          this.activeName = 'clxx'
        }else if(scrolled <= this.heightList.fcxx && scrolled <= this.heightList.qfjj){
          this.activeName = 'fcxx'
        }else if(scrolled > this.heightList.fcxx && scrolled <= this.heightList.qfjj){
          this.activeName = 'qfjj'
        }else if(scrolled > this.heightList.qfjj && scrolled <= this.heightList.jfjl){
          this.activeName = 'jfjl'
        }else if(scrolled > this.heightList.jfjl){
          this.activeName = 'clxx'
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .layout-container {
    min-height: calc(100vh - 84px);
    background-color: #f2f2f2;

    .el-aside {
      padding: 15px 10px 0px;
    }

    .el-main {
      padding: 15px 10px;
    }
  }

  /*.main-scroll {*/
    /*height: calc(100vh - 120px);*/
    /*overflow-y: auto;*/
    /*overflow-x: hidden;*/
  /*}*/

</style>
